<template>
	<view class="content display displayColumn  fontSize font_comm width_750">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true" >
			<template slot="left">
				<uni-icons type="left" color="#000;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">订单详情</text>
			</template>
		</u-navbar>
		<view class="fn_content display  width_750 displayColumn displaycenter_aliem M-T30">
			<!-- 第一行 -->
			<view class="fn_ones display  displayColumn displaycenter_aliem">
				<view class="ones_items display  width-100">
					<view class="ones_items_left display ">
						<image class="fn_imgs M-L24" :src="info.goodsUrl" mode=""></image>
					</view>
					<view class="ones_items_right display  displayColumn M-L16" style="text-align: left;">
						<span class="fn_txt1" style="margin-top: 15rpx;">{{info.goodsName}}</span>
						<view class="fn_sss display  M-T12">
							<view class="fn_sss_one display  all_item">
								<span class="fn_txt2">{{info.rules}}</span>
							</view>
							<view class="fn_sss_two display  all_item">
								<span class="fn_txt2" style="color: #126BC9;">免预约</span>
							</view>
						</view>
					</view>
				</view>
				<canvas id="qrcode" canvas-id="qrcode" style="width:322rpx;height: 322rpx;margin-top: 30rpx;" v-if="info.productType == 2"></canvas>
				<span class="fn_duihuanma M-T20" v-if="info.productType == 2">兑换码</span>
				<span class="fn_duihuanma M-T8" style="font-size: 28rpx;" v-if="info.productType == 2">{{info.code}}</span>
				<button class="fn_btnsss1 display all_item M-T20" v-if="code" @click="verify(code)">确认兑换</button>
				<button class="fn_btnsss1 display all_item M-T20" v-if="!code && info.orderStatus != 12" @click="tuikuan(info.id)">取消订单</button>
			</view>
			<view class="fn_twos display  displayColumn" :style="{'text-align': 'left','position': 'relative'}">
				<span class="fn_ttx1 M-T36 M-L30">购买须知</span>
				<view class=" display displayColumn  M-T20" :class="{'fn_twos_all':!flag,'fn_twos_all1':flag}">
					<span class="fn_tttx1" style="margin-top: 24rpx;margin-left: 30rpx;">可用日期</span>
					<span class="fn_tttx2" style="margin-top: 8rpx;margin-left: 30rpx;">{{info.validityDay}}</span>
					<span class="fn_tttx1" style="margin-top: 24rpx;margin-left: 30rpx;">可用时间</span>
					<span class="fn_tttx2" style="margin-top: 8rpx;margin-left: 30rpx;">{{info.validityTime}}</span>
					<span class="fn_tttx1" style="margin-top: 24rpx;margin-left: 30rpx;">限用数量</span>
					<span class="fn_tttx2" style="margin-top: 8rpx;margin-left: 30rpx;">{{info.limitNum}}</span>
					<span class="fn_tttx1" style="margin-top: 24rpx;margin-left: 30rpx;">预约规则</span>
					<span class="fn_tttx2" style="margin-top: 8rpx;margin-left: 30rpx;">{{info.rules}}</span>
					<span class="fn_tttx1" style="margin-top: 24rpx;margin-left: 30rpx;">其他规则</span>
					<span class="fn_tttx2" style="margin-top: 8rpx;margin-left: 30rpx;">不限制，可重复使用</span>
					<view class="pos_more " v-if="!flag" @click="todianji">
						<view class="display  width-100 all_item">
							<span class="fn_zhankai">展开更多</span>
							<uni-icons type="down" size="15" color="#72778A"></uni-icons>
						</view>
					</view>
					<view class="display  width-100 all_item" v-if="flag" @click="todianji">
						<span class="fn_zhankai">收起</span>
						<uni-icons type="up" size="15" color="#72778A"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 订单编号 -->
			<view class="fn_dingdan display  width-100 displayColumn M-T30">
				<view class="fn_dingdan_one display  width-100">
					<span class="fn_tnsx1 M-L24">订单编号</span>
					<span class="fn_tnsx2 M-R24">{{info.id}}</span>
				</view>
				<view class="fn_dingdan_one display  width-100 M-T20">
					<span class="fn_tnsx1 M-L24">购买份数</span>
					<span class="fn_tnsx2 M-R24">{{info.amount}}份</span>
				</view>
				<view class="fn_dingdan_one display  width-100 M-T20">
					<span class="fn_tnsx1 M-L24">手机号</span>
					<span class="fn_tnsx2 M-R24">{{info.userPhone.slice(0,3)}}****{{info.userPhone.slice(7,11)}}</span>
				</view>
				<view class="fn_dingdan_one display  width-100 M-T20">
					<span class="fn_tnsx1 M-L24">联系商家</span>
					<uni-icons type="phone-filled" color="#126BC9" size="20" style="margin-right: 24rpx;" @click="tophone(info)"></uni-icons>
				</view>
				<view class="fn_dingdan_one display  width-100 M-T20">
					<span class="fn_tnsx1 M-L24">支付时间</span>
					<span class="fn_tnsx2 M-R24">{{info.createTime}}</span>
				</view>
				<view class="fn_dingdan_one display  width-100 M-T20">
					<span class="fn_tnsx1 M-L24">支付方式</span>
					<span class="fn_tnsx2 M-R24" v-if="info.goodsPayType==2">余额支付</span>
					<span class="fn_tnsx2 M-R24" v-if="info.goodsPayType==3">微信支付</span>
				</view>
			</view>
			<!-- 小贴士 -->
			<view class="xiaoties display  displayColumn width_750 displaycenter_aliem" style="text-align: left;">
				<span class="fn_ttx1 M-T36 M-L30" style="text-align: left;">小贴士</span>
				<view class="fn_tiesi display displayColumn displaycenter_jus M-T20">
					<span class="fn_ttsh1 M-L24 M-T20" v-for="(item,index) in content" :key="index">{{item}}</span>
					<!-- <span class="fn_ttsh1 M-L24 M-T20">2.门站周围有停车场，凭消费证明可免费停车</span> -->
				</view>
			</view>
		</view>
		<view class="display width-100 " style="height: 80rpx;">
		</view>
	</view>
</template>
<script>
	import UQRCode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				flag:false,
				id:'',
				code:'',
				info:{},
				content:[]
			}
		},
		onLoad(options) {
			if(options.code != null){
				this.code = options.code;
				console.log("code=========" + this.code)
				this.getDetailsByCode();
			}
			if(options.id != null){
				this.id = options.id;
				this.getDetails();
			}
			console.log(this.id)
			this.$modal.loading('加载中')
			// 获取小贴士
			this.getSmalltips();
		},
		onReady() {
			// this.getCode();
		},
		methods: {
			verify(code){
				this.$modal.loading('操作中');
					this.$req.get(`/xcx/productUserOrder/verify/code/${code}`).then(res=>{
						this.$modal.closeLoading();
						if(res.data.code == 200){
							this.$modal.msg("兑换成功");
							setTimeout(()=>{
								uni.navigateBack();
							},1000)
						}else{
							this.$modal.msg(res.data.msg);
						}
						
					})
			},
			// 退款
			tuikuan(id){
				this.$modal.loading('取消中');
				if(this.info.goodsPayType==2){
					this.$req.get(`/xcx/productUserOrder/cancel/${this.id}`).then(res=>{
						this.$modal.closeLoading();
						if(res.data.code==200){
							this.$modal.msg("取消成功");
							setTimeout(()=>{
								uni.navigateBack();
							},2000)
						}else{
							this.$modal.msg(res.data.msg);
						}
						
					})
				}else if(this.info.goodsPayType==3){
					let data = {
						id:this.id,
						goodsPayType:this.info.goodsPayType
					}
					this.$req.post('/refund/productOrder',data).then(res=>{
						this.$modal.closeLoading();
						if(res.data.code==200){
							this.$modal.msg("取消成功");
							setTimeout(()=>{
								uni.navigateBack();
							},2000)
						}else{
							this.$modal.msg(res.data.msg);
						}
					})
				}
				
			},
			//获取小贴士
			getSmalltips(){
				this.$req.get(`/xcx/tipsInfo/tipType/${0}`).then(res=>{
					console.log(res);
					this.content = res.data.data.content.split('<br>')
					console.log(this.content );
				})
			},
			tophone(phone){
				this.$modal.confirm('确认拨打商家电话吗?').then(res=>{
					if(res){
						uni.makePhoneCall({
							phoneNumber: `${phone}` //仅为示例
						});
					}
				})
				
			},
			getDetailsByCode(){
				this.$req.get(`/xcx/productUserOrder/getInfoByCode/${this.code}`).then(res=>{
					this.$modal.closeLoading()
					if(res.data.code==200){
						this.info = res.data.data;
						this.getCode();
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getDetails(){
				this.$req.get(`/xcx/productUserOrder/${this.id}`).then(res=>{
					this.$modal.closeLoading()
					if(res.data.code==200){
						this.info = res.data.data;
						this.getCode();
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			todianji(){
				this.flag = !this.flag;
			},
			getCode() {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.info.code;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 161; //默认为px
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				this.$modal.closeLoading();
			},
		}
	}
</script>

<style scoped lang="scss">
.fn_ones{
	width: 690rpx;
	// height: 736rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_imgs{
	width: 146rpx;
	height: 146rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.fn_sss_one{
	width: 156rpx;
	height: 34rpx;
	background: rgba(255,103,45,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_txt2{
	font-weight: 600;
	font-size: 20rpx;
	color: #FF672D;
}
.fn_sss_two{
	width: 76rpx;
	height: 34rpx;
	background: rgba(18,107,201,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_txt1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_duihuanma{
	font-weight: 600;
	font-size: 24rpx;
	color: #000000;
}
.fn_btnsss1{
	width: 152rpx;
	height: 62rpx;
	background: rgba(23,105,143,0.1);
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	border: 2rpx solid;
	border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
	font-weight: 600;
	font-size: 24rpx;
	color: #126BC9;
}
.fn_ttx1{
	font-weight: 600;
	font-size: 32rpx;
	color: #000000;
}
.fn_twos_all{
	width: 690rpx;
	// padding-top: 24rpx;
	// padding-bottom: 24rpx;
	max-height: 186rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	overflow: hidden;
}
.fn_twos_all1{
	width: 690rpx;
	// padding-top: 24rpx;
	// padding-bottom: 24rpx;
	// min-height: 186rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	overflow: hidden;
}
.fn_tttx1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_tttx2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.pos_more{
	position: absolute;
	width: 690rpx;
	background:rgba(255, 255, 255, 0.7);
	top: 230rpx;
	
}
.fn_zhankai{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_dingdan{
	padding-top:24rpx;
	padding-bottom: 24rpx;
	width: 690rpx;
	
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_dingdan_one{
	justify-content: space-between;
}
.fn_tnsx1{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_tnsx2{
	font-weight: 600;
	font-size: 24rpx;
	color: #212121;
}
.fn_ttsh1{
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}
.fn_tiesi{
	width: 690rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
</style>
